<template>
    <el-row class="body3">
      <el-col class="result1">
        <div class="o-image__preview">
          <el-image
            :src= "url_org"
            class="image_1"
            style="border-radius: 3px 3px 0 0;"
            :preview-src-list = "[url_org]"
          >
            <div slot="error">
              <div slot="placeholder" class="error"></div>
            </div>
          </el-image>
        </div>
        <div class="info_2">
                                  <span style="color:black "
                                  >原图</span><br>
        </div>
        <div class="o-image__preview">
          <el-image
            v-if="url_seg_org !=''"
            :src="url_seg_org"
            class="image_1"
            style="border-radius: 3px 3px 0 0;"
            :preview-src-list = "[url_seg_org]"
          >
            <div slot="error">
              <div slot="placeholder" class="error"></div>
            </div>
          </el-image>
        </div>
        <div class="info_2">
                                  <span style="color:black; padding-bottom: 0"
                                  >原图：角膜神经分割结果</span
                                  >
        </div>
        <div class="o-image__preview">
          <el-image
            v-if="url_seg2_org !=''"
            :src="url_seg2_org"
            class="image_1"
            style="border-radius: 3px 3px 0 0;"
            :preview-src-list = "[url_seg2_org]"
          >
            <div slot="error">
              <div slot="placeholder" class="error"></div>
            </div>
          </el-image>
        </div>
        <div class="info_2">
          <span style="color:black; padding-bottom: 0"
          >原图：弯曲度分级 <span style="color:red;font-weight:bold">{{this.level_org}}</span>级</span><br>
          <span style="color:black; padding-bottom: 0"
          >原图：弯曲度概率 <span style="color:red;font-weight:bold">{{this.level_org1}}</span></span><br>
          <span>模型注意力热度血管投影</span>
        </div>
        <el-image :src="require('@/assets/nerve.png')" style="width: 60%; margin-top: -1%"></el-image>
      </el-col>
      <el-col class="result11">
        <div class="info_21">
          <span style="color:black "
          ><Splicing :url_org="url_org" :url_enh="url_enh"/></span><br>
        </div>
        <div class="info_22">
          <span style="color:black "
          ><Splicing :url_org="url_seg_org" :url_enh="url_seg_enh"/></span><br>
        </div>
        <div class="info_23">
          <span style="color:black "
          ><Splicing :url_org="url_seg2_org" :url_enh="url_seg2_enh"/></span><br>
        </div>
      </el-col>
      <el-col class="result2">
        <div class="o-image__preview">
          <el-image
            v-if="url_enh != ''"
            :src="url_enh"
            class="image_1"
            style="border-radius: 3px 3px 0 0;"
            :preview-src-list = "[url_enh]"
          >
            <div slot="error">
              <div slot="placeholder" class="error"></div>
            </div>
          </el-image>
        </div>
        <div class="info_2">
                                  <span style="color:black; padding-bottom: 0"
                                  >增强结果</span
                                  ><br>
        </div>
        <div class="o-image__preview">
          <el-image
            v-if="url_seg_enh != ''"
            :src="url_seg_enh"
            class="image_1"
            style="border-radius: 3px 3px 0 0;"
            :preview-src-list = "[url_seg_enh]"
          >
            <div slot="error">
              <div slot="placeholder" class="error"></div>
            </div>
          </el-image>
        </div>
        <div class="info_2">
                                  <span style="color:black; padding-bottom: 0;"
                                  >增强图：角膜神经分割结果</span
                                  >
        </div>
        <div class="o-image__preview">
          <el-image
            v-if="url_seg2_enh != ''"
            :src="url_seg2_enh"
            class="image_1"
            style="border-radius: 3px 3px 0 0;"
            :preview-src-list = "[url_seg2_enh]"
          >
            <div slot="error">
              <div slot="placeholder" class="error"></div>
            </div>
          </el-image>
        </div>
        <div class="info_2">
          <span style="color:black; padding-bottom: 0"
          >增强图：弯曲度分级 <span style="color:red;font-weight:bold">{{this.level_enh}}</span>级</span
          ><br>
          <span style="color:black; padding-bottom: 0"
          >增强图：弯曲度概率 <span style="color:red;font-weight:bold">{{this.level_enh1}}</span></span
          ><br>
          <span>模型注意力热度血管投影</span>
        </div>
      </el-col>
      <el-col class="result1">
        <div class="o-image__preview">
          <el-image
            v-if="url_color_org != ''"
            :src="url_color_org"
            class="image_1"
            style="border-radius: 3px 3px 0 0;"
            :preview-src-list = "[url_color_org]"
          >
            <div slot="error">
              <div slot="placeholder" class="error"></div>
            </div>
          </el-image>
        </div>
        <div class="info_2">
                                  <span style="color:black; padding-bottom: 0"
                                  >原图:连通域检测结果</span
                                  ><br>
        </div>
        <div class="o-image__preview">
          <el-image
            v-if="url_point_org != ''"
            :src="url_point_org"
            class="image_1"
            style="border-radius: 3px 3px 0 0;"
            :preview-src-list = "[url_point_org]"
          >
            <div slot="error">
              <div slot="placeholder" class="error"></div>
            </div>
          </el-image>
        </div>
        <div class="info_2">
                                  <span style="color:black; padding-bottom: 0;"
                                  >原图:分支点检测结果</span
                                  >
        </div>
        <div class="o-image__preview">
          <el-image
            v-if="url_grade_org != ''"
            :src="url_grade_org"
            class="image_1"
            style="border-radius: 3px 3px 0 0;"
            :preview-src-list = "[url_grade_org]"
          >
            <div slot="error">
              <div slot="placeholder" class="error"></div>
            </div>
          </el-image>
        </div>
        <div class="info_2">
                                  <span style="color:black; padding-bottom: 0; margin-bottom: 3%;"
                                  >原图</span
                                  ><br>
          <span>模型注意力热度区域投影</span>
        </div>
      </el-col>
      <el-col class="result11">
        <div class="info_21">
          <span style="color:black "
          ><Splicing :url_org="url_color_org" :url_enh="url_color_enh"/></span><br>
        </div>
        <div class="info_22">
          <span style="color:black "
          ><Splicing :url_org="url_point_org" :url_enh="url_point_enh"/></span><br>
        </div>
        <div class="info_23">
          <span style="color:black "
          ><Splicing :url_org="url_grade_org" :url_enh="url_grade_enh"/></span><br>
        </div>
      </el-col>
      <el-col class="result2">
        <div class="o-image__preview">
          <el-image
            v-if="url_color_enh != ''"
            :src="url_color_enh"
            class="image_1"
            style="border-radius: 3px 3px 0 0;"
            :preview-src-list = "[url_color_enh]"
          >
            <div slot="error">
              <div slot="placeholder" class="error"></div>
            </div>
          </el-image>
        </div>
        <div class="info_2">
                                  <span style="color:black; padding-bottom: 0"
                                  >增强图:连通域检测结果</span
                                  ><br>
        </div>
        <div class="o-image__preview">
          <el-image
            v-if="url_point_enh != ''"
            :src="url_point_enh"
            class="image_1"
            style="border-radius: 3px 3px 0 0;"
            :preview-src-list = "[url_point_enh]"
          >
            <div slot="error">
              <div slot="placeholder" class="error"></div>
            </div>
          </el-image>
        </div>
        <div class="info_2">
                                  <span style="color:black; padding-bottom: 0;"
                                  >增强图:分支点检测结果</span
                                  >
        </div>
        <div class="o-image__preview">
          <el-image
            v-if="url_grade_enh != ''"
            :src="url_grade_enh"
            class="image_1"
            style="border-radius: 3px 3px 0 0;"
            :preview-src-list = "[url_grade_enh]"
          >
            <div slot="error">
              <div slot="placeholder" class="error"></div>
            </div>
          </el-image>
        </div>
        <div class="info_2">
                                 <span style="color:black; padding-bottom: 0"
                                 >增强图</span
                                 ><br>
          <span>模型注意力热度区域投影</span>
        </div>
      </el-col>
    </el-row>
</template>
<script>

import Splicing from './Splicing'

export default {
  components: { Splicing },
  props: {
    url_org: {
      type: String
    },
    url_enh: {
      type: String
    },
    url_seg_org: {
      type: String
    },
    url_seg_enh: {
      type: String
    },
    url_seg2_org: {
      type: String
    },
    url_seg2_enh: {
      type: String
    },
    url_grade_org: {
      type: String
    },
    url_grade_enh: {
      type: String
    },
    level_org: {
      type: Number
    },
    level_enh: {
      type: Number
    },
    level_org1: {
      type: String
    },
    level_enh1: {
      type: String
    },
    url_color_org: {
      type: String
    },
    url_color_enh: {
      type: String
    },
    url_point_org: {
      type: String
    },
    url_point_enh: {
      type: String
    },
    url_seg3_org: {
      type: String
    },
    url_seg3_enh: {
      type: String
    },
    vascular_org: {
      type: String
    },
    vascular_enh: {
      type: String
    },
    json1: {
      type: Object
    },
    json2: {
      type: Object
    },
    search_img_name: {
      type: String
    }

  },
  filters: {
    // 当标题字数超出时，超出部分显示’...‘。此处限制超出8位即触发隐藏效果
    ellipsis (value) {
      if (!value) return ''
      if (value.length > 12) {
        return value.slice(0, 12) + '...'
      }
      return value
    }
  },
  data () {
    return {
      left_time: '开始处理',
      // server_url: 'http://114.55.245.149:5001',
      // server_url: 'http://192.168.31.200:50001',
      server_url: 'http://192.168.31.200:50001'
      // server_url: 'http://192.168.8.115:50001',
      // server_url: 'http://localhost:5001',
      // server_url: 'http://127.0.0.1:7899',
    }
  }

}
</script>

<style lang="scss" scoped>
.chosen{
  margin-top: 5%;
}

.button{

  display: flex;
  flex-direction:column;
  justify-content: space-around;
  align-items:start;
}
.button1{

  display: flex;
  flex-direction:row;
  justify-content: space-around;
  align-items:start;
}
.card1{
  height: 18%;
  margin-top: 1%;
  padding-bottom: 5%;
}
.card2{
  height: 82%;
  margin-top: 1%;
  padding-bottom: 5%;
}
.card3{
  height: 15%;
  margin-top: 1%;
  padding-bottom: 5%;
}
.card4{
  height: 80%;
  margin-top: 1%;
  padding-bottom: 5%;
}
.option{
  height: 40%;

  display: flex;
  flex-direction:row;
  flex-wrap: nowrap;
  margin-left: 0;
  align-items:center;
}
.col1{
  flex:1;
  display: flex;
  flex-direction:column;
  flex-wrap: nowrap;
  justify-content:space-around;
  align-items:flex-start;
}
.col2{
  flex:5;
}
.body1{
  display: flex;
  flex-direction:row;
  justify-content: space-around;
  align-items:flex-start;
}
.body2{
  display: flex;
  flex-direction:row;
  align-items: center;
  justify-content: space-around;
}
.body3{
  display: flex;
  flex-direction:row;
  align-items: flex-start;
}
.input{
  margin-top: 5%;
  margin-bottom: 5%;
  display: flex;
  flex-direction:column;
  align-items: center;
  justify-content: space-around;
}
.corneal{
  display: flex;
  flex-direction:row;
  flex-wrap: wrap;

}
.dd{
  width: 100%;
  display: flex;
  flex-direction:column;
  align-items:center;
}
.demo-image__preview {
  width: 80%;
  aspect-ratio: 1 / 1;
  float: left;
  align-content: center;
  display: flex;
  flex-direction:column;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.09);
}
.o-image__preview {
  width: 55%;
  aspect-ratio: 1 / 1;
  float: left;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.09);
}
.info_1 {
  margin-top: 5%;
  text-align: center;
  white-space: nowrap;
  background-color: unset;
  width: 70%;
}
.info_2 {
  white-space: nowrap;
  text-align: center;

  background-color: unset;
  width: 55%;
  margin-bottom: 10%;
}
.info_21 {
  white-space: nowrap;
  text-align: center;

  background-color: unset;
  width: 100%;
  margin-bottom: 70%;
  margin-top: 50%;
}
.info_22 {
  white-space: nowrap;
  text-align: center;

  background-color: unset;
  width: 100%;
  margin-bottom: 70%;
  margin-top: 20%;
}
.info_23 {
  white-space: nowrap;
  text-align: center;

  background-color: unset;
  width: 100%;
  margin-bottom: 70%;
  margin-top: 30%;
}
.image {
  aspect-ratio: 1 / 1;
  background-color: unset;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.09);
  display: flex;
  justify-content: center;
  align-items:center;
}
.image_1 {
  aspect-ratio: 1 / 1;
  background-color: unset;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.09);
}

.result1{
  display: flex;
  flex:3;
  flex-direction:column;
  align-items:center;
}
.result11{
  width: 8%;
  display: flex;
  flex:0.1;
  flex-direction:column;
  align-items:center;
}
.result2{
  display: flex;
  flex:3;
  flex-direction:column;
  align-items:center;
}
.result3{
  display: flex;
  flex-direction:column;
  align-items:center;
}
.result4{
  display: flex;
  flex-direction:column;
  align-items:center;
}
.row{
  flex: 1;
  height: 30%;
  width: 100%;
  display: flex;
  flex-direction:row;
  align-items: center;
  justify-content: space-around;
  margin-bottom: 10%;
}
.pic{
  flex: 1;

  flex-direction:column;
  justify-content:space-around;
  align-items:center;
}
.app-container {
  padding: 20px;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
